<script setup lang="ts">
import IconFloder from "@/components/icons/IconFloder.vue";
import IconVideo from "@/components/icons/IconVideo.vue";
import IconImage from "@/components/icons/IconImage.vue";
import IconDocument from "@/components/icons/IconDocument.vue";
import IconAudio from "@/components/icons/IconAudio.vue";
import IconBt from "@/components/icons/IconBt.vue";
import IconOther from "@/components/icons/IconOther.vue";
import { useAppStoreHook } from "@/store";
const useAppStore = useAppStoreHook();
interface Props {}
const props = withDefaults(defineProps<Props>(), {});
const route = useRoute();
const router = useRouter();
const switchBool = computed(() => useAppStore.isOpen_sider);
const list = ref([
  {
    icon: IconFloder,
    name: "全部文件",
    isActive: false,
    category: "all",
  },
  {
    icon: IconVideo,
    name: "视频",
    isActive: false,
    category: "1",
  },
  {
    icon: IconImage,
    name: "图片",
    isActive: false,
    category: "2",
  },
  {
    icon: IconDocument,
    name: "文档",
    isActive: false,
    category: "3",
  },
  {
    icon: IconAudio,
    name: "音频",
    isActive: false,
    category: "4",
  },
  {
    icon: IconBt,
    name: "BT种子",
    isActive: false,
    category: "5",
  },
  {
    icon: IconOther,
    name: "其他",
    isActive: false,
    category: "6",
  },
]);
const toggleAvtive = (item: any) => {
  // useAppStore.edit_search_inputText("");
  list.value.forEach((it: any) => {
    it.isActive = false;
  });
  item.isActive = true;
  router.replace({ query: { category: item.category } });
  // useAppStore.edit_search_inputText("");
};
const toggleSwitchBool = (bool: any) => {
  useAppStore.toggle_isOpen_sider(bool);
};
onMounted(() => {
  //   console.log("route", route);
  let item = list.value.find(
    (item: any) => item.category == route.query.category
  );
  if (item) {
    toggleAvtive(item);
  }
  //   console.log("useAppStore", useAppStoreHook());
});
watch(route, () => {
  let item = list.value.find(
    (item: any) => item.category == route.query.category
  );
  if (item) {
    toggleAvtive(item);
  }
});
</script>

<template>
  <div
    class="siderNav-container"
    :style="{ width: switchBool ? '220px' : '80px' }"
  >
    <div class="card">
      <ul class="card-ul">
        <li
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: item.isActive }"
          @click="toggleAvtive(item)"
        >
          <component class="icon" :is="item.icon"></component>
          <span v-if="switchBool">{{ item.name }}</span>
        </li>
      </ul>
      <div class="bottom">
        <theme-view v-show="switchBool" viewType="switch"></theme-view>
        <div class="switch" @click="toggleSwitchBool(!switchBool)">
          <el-icon v-if="switchBool"><ArrowLeftBold /></el-icon>
          <el-icon v-else><ArrowRightBold /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.siderNav-container {
  width: px2rem(220px);
  padding: px2rem(16px);
  border-right: 1px solid var(--el-border-color);
  position: relative;
  transition: all 500ms;
  .card {
    // background: var(--el-overlay-color);
    border-radius: px2rem(10px);
    height: 100%;
    display: flex;
    flex-direction: column;
    .card-ul {
      margin-bottom: auto;
      li {
        display: flex;
        align-items: center;
        padding: px2rem(10px) px2rem(16px);
        gap: 10px;
        font-size: px2rem(14px);
        border-radius: px2rem(10px);
        cursor: pointer;
        margin-bottom: px2rem(10px);
        user-select: none;

        .icon {
          font-size: px2rem(20px);
          font-weight: bold;
        }
        &.active {
          --color: var(--el-color-primary);
          //   --color: var(--el-text-color-primary);
          background: var(--color);
          color: #fff;
        }
        span {
          white-space: nowrap;
          // user-select: none;
        }
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px2rem(50px);
  }
  .switch {
    // position: absolute;
    // top: 50%;
    // transform: translateY(-50%);
    // right: 0;
    // width: px2rem(20px);
    // height : px2rem(60px);
    height: 80%;
    aspect-ratio: 1 / 1;
    border-radius: px2rem(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: px2rem(16px);
    background: var(--el-bg-color);
    cursor: pointer;
  }
}
</style>
